Lector

Multipurpose Template

Installation

Follow the steps below to get started with Lector Multipurpose HTML Template  :

  1. Open the Package/Lector Folder to find all the Templates Files
  2. You will need to Upload these files to your Web Server using FTP or cPanle in order to use it on your Website.
  3. Make sure you have upload the required files and folders listed below:
    • Lector HTML/assets - Stylesheets, JavaScript, Fonts etc Folder 
    • Lector HTML/assets/images - Images Folder  
    • Lector HTML/index.html - Index File/Homepage
    The other files can be used according to your preferences.
  4. You're now ready to go..! Start adding your Content and show off your Brand New Website.

Features At A Glance

  1. HTML5 & CSS3 & jQuery
  2. Modern And Creative Design
  3. Universal menu
  4. 100% Responsive
  5. Well documented
  6. Complete SASS files
  7. Bootstrap 4.3.1
  8. Flaticon Used
  9. Fontawesome Used
  10. NstSlider Used
  11. Google Font Used
  12. Lightcase Used
  13. Google Map
  14. Eye Catching Design
  15. W3C Valid Code

HTML Structure

Lector has follows a simple coding structure. here is the sample:

 

	
 

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<title>Lector</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="description" content="Lactor Template is a Creative Multipurpose HTML5 Lactor Template">
	<meta name="keywords" content="Lactor, HTML5, Multipurpose, Template">
	<meta name="author" content="CodexCoder">

	<link href="https://fonts.googleapis.com/css?family=Rubik:300,300i,400,400i,500,500i,700,700i,900,900i" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i" rel="stylesheet">

	<link rel="shortcut icon" type="image/x-icon" href="assets/images/x-icon.png">

	<link rel="stylesheet" type="text/css" href="assets/css/animate.css">
	<link rel="stylesheet" type="text/css" href="assets/css/bootstrap-grid.css">
	<link rel="stylesheet" type="text/css" href="assets/css/all.min.css">
	<link rel="stylesheet" type="text/css" href="assets/css/lightcase.css">
	<link rel="stylesheet" type="text/css" href="assets/flaticon/flaticon.css">
	<link rel="stylesheet" type="text/css" href="assets/css/swiper.min.css">
	<link rel="stylesheet" type="text/css" href="assets/css/slick.css">
	<link rel="stylesheet" type="text/css" href="assets/css/slick-theme.css">
	<link rel="stylesheet" type="text/css" href="assets/css/jquery.nstSlider.css">
	<link rel="stylesheet" type="text/css" href="assets/css/style.css">
	</head>

	<body>
	<div class="search-area">
	<div class="search-input">
	<div class="search-close">
	<span></span>
	<span></span>
	</div>
	<form>
	<input type="text" name="text" placeholder="*Search Here">
	</form>
	</div>
	</div>

	<!-- mobile-nav section start here -->
	<div class="mobile-menu">
	<nav class="mobile-header primary-menu d-lg-none">
	<div class="header-logo">
	<a href="index.html" class="logo"><img src="assets/images/logo/logo.png" alt="logo"></a>

	<header class="header-section d-none d-lg-block">
	<div class="header-top">
	<div class="container">
	<div class="htop-area row">
	<div class="htop-left">
	<p>1822 N Vermont Ave, Los Angeles, CA 90027, USA</p>
	</div>
	<div class="htop-right">
	<ul class="htop-information">
	<li>+880 234 567 890</li>
	<li><a href="#">infolector@gmail.com</a></li>

	<li><a href="#">Faq </a></li>
	<li><a href="#">Terms & Conditions</a></li>
	</ul>
	</div>
	</div>
	</div>
	</div>
	</footer>
	<!-- foooter section ending here -->

	<!-- scrollToTop start here -->
	<a href="#" class="scrollToTop"><i class="flaticon-chevron-up"></i></a>
	<!-- scrollToTop ending here -->

	<script src="assets/js/jquery.js"></script>
	<script src="assets/js/fontawesome.min.js"></script>
	<script src="assets/js/jquery.counterup.min.js"></script>
	<script src='assets/js/jquery.easing.js'></script>
	<script src='assets/js/slick.min.js'></script>
	<script src="assets/js/lightcase.js"></script>
	<script src="assets/js/circular-countdown.js"></script>
	<script src="assets/js/jquery.countdown.min.js"></script>
	<script src="assets/js/waypoints.min.js"></script>
	<script src="assets/js/bootstrap.min.js"></script>
	<script src="assets/js/isotope.pkgd.min.js"></script>
	<script src="assets/js/wow.min.js"></script>
	<script src="assets/js/theia-sticky-sidebar.js"></script>
	<script src="assets/js/swiper.min.js"></script>
	<script src="assets/js/functions.js"></script>
	</body>
	</html>
	
 

 

CSS Structure

We are using several CSS files in this Template. codexcoder Always follow the latest trends of coding standard. Many browser interpret the default behavior of HTML elements differently. By using a general reset CSS file, we can work round this. This file also contains some general styling, such as anchor tag colors, font-sizes, etc. Keep in mind, that these values might be overridden somewhere else in the file.

CSS Fiile Included

  • Animate css used
  • Bootstrap css used
  • Lightcase used
  • Swiper used
  • Favicon used
  • Fontawesome used
  • Flaticon used
  • NstSlider used
  • Slick used
  • Slick-theme used
  • Style.css used
  • and some other necessary css files 
style.css situated on assets/css/ contain the the all necessary custom style which is well organized and following are the style.css file structure :
 
 
	
 

	Theme Name: Lector Multipurpose HTML Template 
	Theme URI: http://codexcoder.com/ 
	Author: codexcoder 
	Author URI: http://codexcoder.com/ 
	You can customize it easily according to your choice.It is suitable for your 
	Multipurpose, or. Lector can be easily customized and it is well documented.; 
	Version: 1.0.0 
	License: GNU General Public License v2 or later 
	License URI: http://www.gnu.org/licenses/gpl-2.0.html 
	Tags: intro, material , material design, material, online , online  
	Multipurpose, online, information, Multipurpose, webpage, Multipurpose, 
	responsive, simple Multipurpose.
	
	/*---------------------------------------------
	Table of CONTENT
	-----------------------------------------------
	01. Default CSS
	02. Header 
	03. Banner 
	04. Page Header
	05. Services
	06. About
	07. Videos
	08. Progress
	09. Case-study
	10. Advisors
	11. Testimonial
	12. Faq
	13. Achievement
	14. Support
	15. Blog
	16. News-letter
	17. Footer
	-----------------------------------------------*/
	
 
 
 
	
 

	.header-section .header-top {
	background: #663efc; }
	.header-section .header-top .htop-area {
	justify-content: space-between;
	align-items: center; }
	.header-section .header-top .htop-area .htop-left p {
	color: #fff;
	margin-bottom: 0;
	font-size: 15px; }
	.header-section .header-top .htop-area .htop-right {
	align-items: center;
	justify-content: flex-end; }
	.header-section .header-top .htop-area .htop-right .htop-information {
	margin: 0;
	justify-content: space-between; }
	.header-section .header-top .htop-area .htop-right .htop-information li {
	color: #fff;
	font-size: 15px;
	margin-right: 40px; }
	.header-section .header-top .htop-area .htop-right .htop-information li:last-child {
	margin-right: 20px; }
	.header-section .header-top .htop-area .htop-right .htop-information li a {
	color: #fff; }

	.primary-menu {
	z-index: 11;
	top: 50px;
	width: 100%;
	text-align: center;
	display: block;
	background: transparent;
	box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	transition: all 0.3s ease; }
	.primary-menu .menu-area .logo {
	padding: 17px 0;
	outline: none; }
	.primary-menu .menu-area ul.main-menu {
	list-style: none;
	margin: 0;
	justify-content: center; }
	.primary-menu .menu-area ul.main-menu li {
	padding: 0;
	position: relative; }
	.primary-menu .menu-area ul.main-menu li:last-child a {
	margin-right: 0; }
	.primary-menu .menu-area ul.main-menu li a {
	color: rgba(64, 54, 99, 0.8);
	padding: 38px 10px;
	display: inline-block;
	margin: 0 10px;
	font-weight: 400;
	position: relative;
	text-transform: capitalize;
	outline: none; }
	.primary-menu .menu-area ul.main-menu li a.active, .primary-menu .menu-area ul.main-menu li a:hover {
	color: #ff7555; }
	.primary-menu .menu-area ul.main-menu li.active > a {
	color: #ff7555; }
	.primary-menu .menu-area ul.main-menu li:hover > a {
	text-decoration: none; }

	.banner {
	background: url(../../assets/images/banner/banner-bg.jpg) no-repeat;
	height: 770px;
	background-size: cover;
	background-position: center;
	position: relative; }
	.banner .banner-area {
	top: 50%;
	left: 50%;
	width: 100%;
	transform: translate(-50%, -50%); }
	@media (min-width: 1200px) {
	.banner .banner-area {
	transform: translate(-50%, -65%); } }
	.banner .banner-area .banner-content {
	max-width: 635px; }
	.banner .banner-area .banner-content .banner-text {
	margin-top: 0; }
	@media (min-width: 1200px) {
	.banner .banner-area .banner-content .banner-text {
	font-size: 56px;
	line-height: 66px; } }

	.footer {
	padding-bottom: 0;
	border-top: 1px solid #ecf0f3;
	background-image: linear-gradient(to bottom, #f4f6f84f, #ffffff); }
	.footer .section-wrapper .footer-top .footer-rounding {
	width: 100%;
	justify-content: center; }
	@media (min-width: 1200px) {
	.footer .section-wrapper .footer-top .footer-rounding {
	width: 40%; } }
	.footer .section-wrapper .footer-top .footer-rounding .footer-logo {
	width: 280px;
	height: 280px;
	border-radius: 100%;
	box-shadow: 0px 0px 24px 0px rgba(27, 16, 66, 0.05);
	text-align: center;
	position: relative; }
	.footer .section-wrapper .footer-top .footer-rounding .footer-logo::before,
	.footer .section-wrapper .footer-top .footer-rounding .footer-logo::after {
	top: 50%;
	left: 50%;
	border-radius: 100%;
	transform: translate(-50%, -50%); }
	.footer .section-wrapper .footer-top .footer-rounding .footer-logo::before {
	width: 340px;
	height: 340px;
	box-shadow: 0px 0px 24px 0px rgba(27, 16, 66, 0.03); }
	@media (max-width: 575px) {
	.footer .section-wrapper .footer-top .footer-rounding .footer-logo::before {
	display: none; } }
	.footer .section-wrapper .footer-top .footer-rounding .footer-logo::after {
	width: 413px;
	height: 413px;
	box-shadow: 0px 0px 24px 0px rgba(27, 16, 66, 0.02); }
	@media (max-width: 575px) {
	.footer .section-wrapper .footer-top .footer-rounding .footer-logo::after {
	display: none; } }
	.footer .section-wrapper .footer-top .footer-rounding .footer-logo .footer-circle-wrapper {
	width: 74%;
	height: 79%;
	left: 13%;
	top: 10%;
	perspective: 1000px;
	position: absolute; }
 

Js Structure

We are using several Js files in this Template. codexcoder Always follow the latest trends of coding standard. Many browser interpret the default behavior of HTML elements differently. By using a general reset Js file, we can work round this. This file also contains some general styling, such as anchor tag colors, font-sizes, etc. Keep in mind, that these values might be overridden somewhere else in the file.

Js Fiile Included

  • jquery.js used
  • fontawesome.js used
  • jquery.counterup.min.js used
  • jquery.easing.js used
  • slick.min used
  • lightcase.js used
  • circular-countdown.js used
  • jquery.countdown.js used
  • waypoints.min.js used
  • bootstrap.min.js used
  • isotope.pkgd.min.js used
  • wow.min.js used
  • swiper.min.js used
  • jquery.nstSlider.js used
  • functions.js used
  • and some other necessary css files 
functions.js situated on assets/css/ contain the the all necessary custom style which is well organized and following are the functions.js file structure :
	
 

	(function($){
	"use strict";
	$(document).ready(function(){
	// lightcase
	$('a[data-rel^=lightcase]').lightcase();

	window.FontAwesomeConfig = {
	searchPseudoElements: true
	}

	// menu icon releted
	$(".main-menu>li>.submenu").parent("li").children("a").addClass("dd-icon-down");
	$(".m-menu>li>.m-submenu").parent("li").children("a").addClass("dd-icon-down");
	$(".main-menu>li>.submenu .submenu").parent("li").children("a").addClass("dd-icon-right");
	$(".m-menu>li>.m-submenu .m-submenu").parent("li").children("a").addClass("dd-icon-down");

	// mobile menu responsive
	$(document).on('click','.header-bar',function(){
	$(".header-bar").toggleClass("close");
	$(".menu").toggleClass("open");
	});

	//mobile drodown menu display
	$('.mobile-menu-area .m-menu li a').on('click', function(e) {
	var element = $(this).parent('li');
	if (element.hasClass('open')) {
	element.removeClass('open');
	element.find('li').removeClass('open');
	element.find('ul').slideUp(1000,"swing");
	}
	else {
	element.addClass('open');
	element.children('ul').slideDown(1000,"swing");
	element.siblings('li').children('ul').slideUp(1000,"swing");
	element.siblings('li').removeClass('open');
	element.siblings('li').find('li').removeClass('open');
	element.siblings('li').find('ul').slideUp(1000,"swing");
	}
	});

	// drop down menu width overflow problem fix
	$('ul').parent().hover(function() {
	var menu = $(this).find("ul");
	var menupos = $(menu).offset();

	if (menupos.left + menu.width() > $(window).width()) {
	var newpos = -$(menu).width();
	menu.css({ left: newpos });
	}
	});

	//menu top fixed start
	var fixed_top = $(".primary-menu");
	$(window).on('scroll', function () {
	if ($(this).scrollTop() > 150) {
	fixed_top.addClass("menu-fixed animated fadeInDown");
	fixed_top.removeClass("slideInUp");
	$('body').addClass("body-padding");
	} else {
	fixed_top.removeClass("menu-fixed fadeInDown");
	fixed_top.addClass("slideInUp");
	$('body').removeClass("body-padding");
	}
	});

	// scroll up start here
	$(document).ready(function(){
	//Check to see if the window is top if not then display button
	$(window).scroll(function(){
	if ($(this).scrollTop() > 300) {
	$('.scrollToTop').css({'bottom':'2%', 'opacity':'1','transition':'all .5s ease'});
	} else {
	$('.scrollToTop').css({'bottom':'-30%', 'opacity':'0','transition':'all .5s ease'})
	}
	});
	//Click event to scroll to top
	$('.scrollToTop').click(function(){
	$('html, body').animate({scrollTop : 0},500);
	return false;
	});
	});

	// search & cart option
	$(document).on('click','.search-cart .search i, .search-close',function(){
	$(".search-area").toggleClass("open");
	});

	// services slider
	var swiper = new Swiper('.services-slider', {
	slidesPerView: 3,
	pagination: {
	el: '.services-pagination',
	clickable: true,
	},
	
 
 

Credits

jQuery
CSS & Fonts